<script setup>
const tableData = [
  {
    title: '2024年11月',
    category: '姚顺意',
    time: '男',
    state: '否',
    money: '6530'
  },
  {
    title: '2024年10月',
    category: '姚顺意',
    time: '男',
    state: '否',
    money: '6700'
  },
  {
    title: '2024年9月',
    category: '姚顺意',
    time: '男',
    state: '是',
    money: '7600'
  }
]

const tableData2 = [
  {
    title: '请假',
    name:'姚顺意',
    category: '2024-11-25',
    time: '2024-11-27',
    state: '3天'
  },
  {
    title: '销假',
    name:'姚顺意',
    category: '2024-11-25',
    time: '2024-11-27',
    state: '3天'
  }
]

const tableData3 = [
  {
    title: '慰问金补贴',
    name:'姚顺意',
    category: '2024-11-22',
    shen:'已审批',
    time: '已到账',
    state: '300元'
  },
  {
    title: '加班补贴',
    name:'姚顺意',
    category: '2024-11-16',
    shen:'已审批',
    time: '未到账',
    state: '150元'
  },
  {
    title: '外聘补贴',
    name:'姚顺意',
    category: '2024-10-18',
    shen:'已审批',
    time: '已到账',
    state: '1000元'
  }
]

</script>

<template>
  <br>
  <div >
   <el-card style="background-color: #ecf5ea">
     <p style="text-align:center;"><span>请销假单据</span></p>
     <hr/>
     <el-table :data="tableData2" style="width: 100%">
       <el-table-column prop="title" label="类型"  />
       <el-table-column prop="name" label="姓名" />
       <el-table-column prop="category" label="开始日期"/>
       <el-table-column prop="time" label="结束日期" />
       <el-table-column prop="state" label="天数" />
     </el-table>
   </el-card>
  </div>
  <br>
  <div >
    <el-card style="background-color: #f4f1fc">
      <p style="text-align:center;"><span>申请单据</span></p>
      <hr/>
      <el-table :data="tableData3" style="width: 100%">
        <el-table-column prop="title" label="申请类型"  />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="category" label="申请日期"/>
        <el-table-column prop="time" label="申请状态" />
        <el-table-column prop="time" label="申请结果" />
        <el-table-column prop="state" label="金额" />
      </el-table>
    </el-card>
  </div>
  <br>
  <div>
    <el-card style="background-color: #e2e9f1">
      <p style="text-align:center;"><span>工资单据</span></p>
      <hr/>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="日期"  />
        <el-table-column prop="category" label="姓名"/>
        <el-table-column prop="time" label="性别" />
        <el-table-column prop="state" label="是否全勤" />
        <el-table-column prop="money" label="金额" />
      </el-table>
    </el-card>
  </div>
</template>

<style scoped lang="scss">

</style>